<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>官方网站首页设置</legend>
        </fieldset>
        <div lay-filter="form">
            <div class="layui-form-item">
                <label class="layui-form-label">SEO关键字</label>
                <div class="layui-input-inline">
                    <input type="text"  autocomplete="off" class="layui-input"
                           v-model="keywords"
                           style="width:500px;" v-on:blur="setNameVal($event,'keywords')"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">SEO描述</label>
                <div class="layui-input-inline">
                    <input type="text"  autocomplete="off" class="layui-input"
                           v-model="description"
                           style="width:500px;" v-on:blur="setNameVal($event,'description')"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上背景图</label>
                <div class="layui-input-inline">
                    <input type="text"  autocomplete="off" class="layui-input" placeholder="请输入图片地址"
                           v-model="indTop"
                           style="width:500px;" v-on:blur="setNameVal($event,'indTop')"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">下背景图</label>
                <div class="layui-input-inline">
                    <input type="text"  autocomplete="off" class="layui-input" placeholder="请输入图片地址"
                           v-model="indBottom"
                           style="width:500px;" v-on:blur="setNameVal($event,'indBottom')"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-clear upload-images">
                    <div class="left">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-warm" id="upload-kefu"> 上传客服微信</button>
                            <div class="img-box">
                                <img class="img" :src="imageKefu" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="left">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-warm" id="upload-gf"> 上传官方微信</button>
                            <div class="img-box">
                                <img class="img" :src="imageGf" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">首页轮播一</label>
                <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="lunbo1Show=!lunbo1Show" style="margin-right:20px;">
                    <i class="fa" :class="lunbo1Show?'fa-caret-down':'fa-caret-up'"></i> {{lunbo1Show?'折叠':'展开'}}
                </button>
                <span v-show="lunbo1Show">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="lunbo1Add()"><i class="fa fa-plus"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="lunbo1Save()"><i class="fa fa-floppy-o"></i>保存</button>
                </span>
                <div class="layui-input-block">
                    <div class="layui-clear lunbo1-list" v-show="lunbo1Show">
                        <div class="left item" v-for="(item,index) in lunbo1">
                            <p><button class="layui-btn layui-btn-sm" v-on:click="lunbo1Upload(index)">上传图片</button></p>
                            <p>
                                <a :href="buildFullUrl(item.src)" target="_blank"><img :src="buildFullUrl(item.src)" /></a>
                            </p>
                            <p>
                                <input type="text" class="layui-input" placeholder="超链接" v-model="item.href"/>
                            </p>
                            <i class="fa fa-trash icon cursor" v-on:click="lunbo1.splice(index,1)"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" >首页轮播二</label>
                <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="lunbo2Show=!lunbo2Show" style="margin-right:20px;">
                    <i class="fa" :class="lunbo2Show?'fa-caret-down':'fa-caret-up'"></i> <span>{{lunbo2Show?'折叠':'展开'}}</span>
                </button>
                <span v-show="lunbo2Show">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="lunbo2Add()"><i class="fa fa-plus"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="lunbo2Save()"><i class="fa fa-floppy-o"></i>保存</button>
                </span>
                <div class="layui-input-block">
                    <div class="layui-clear lunbo2-list" v-show="lunbo2Show">
                        <div class="left item" v-for="(item,index) in lunbo2">
                            <p><button class="layui-btn layui-btn-sm" v-on:click="lunbo2Upload(index)">上传图片</button></p>
                            <p>
                                <a :href="buildFullUrl(item.src)" target="_blank"><img :src="buildFullUrl(item.src)" /></a>
                            </p>
                            <p>
                                <input type="text" class="layui-input" placeholder="超链接" v-model="item.href"/>
                            </p>
                            <i class="fa fa-trash icon cursor" v-on:click="lunbo2.splice(index,1)"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">左侧四按钮</label>
                <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="fourBtnsSave()"><i class="fa fa-floppy-o"></i>保存</button>
                <div class="layui-input-block">
                    <div class="layui-clear four-btns">
                        <div class="left item" v-for="(item,index) in indexFourBtns">
                            <p><input type="text" class="layui-input" placeholder="按钮文字" v-model="item.text"/></p>
                            <p style="margin-top:10px;"><input type="text" class="layui-input" placeholder="超链接" v-model="item.href"/></p>
                            <p style="margin-top:10px;"><button class="layui-btn layui-btn-sm" :id="'fourBtn_'+index">上传图片</button></p>
                            <p class="img-box">
                                <a :href="buildFullUrl(item.background)" target="_blank"><img :src="buildFullUrl(item.background)" /></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">底部板块</label>
                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="blockBottomAdd()"><i class="fa fa-plus"></i>添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="blockBottomSave()"><i class="fa fa-floppy-o"></i>保存</button>
                <div class="layui-input-block block-bottom layui-clear">
                    <div class="item left" v-for="(item,index) in blockBottoms">
                        <i class="fa fa-trash icon cursor del" @click="blockBottoms.splice(index,1)"></i>
                        <div class="layui-clear" style="margin-top: 10px;">
                            <div class="layui-input-inline"><input type="text" class="layui-input" placeholder="标题" v-model="item.title"></div>
                            <div class="layui-input-inline"><input type="text" class="layui-input" placeholder="描述" v-model="item.desc"></div>
                        </div>
                        <div style="margin-top:10px;">
                            <input type="text" class="layui-input" placeholder="视频地址" v-model="item.video">
                        </div>
                        <div class="layui-clear" style="margin-top:10px;">
                            <div class="left front-image image">
                                <button class="layui-btn layui-btn-primary" v-on:click="uploadFrontImage(index)">前景图</button>
                                <img :src="buildFullUrl(item.frontImage)" alt="">
                            </div>
                            <div class="left back-image image">
                                <button class="layui-btn layui-btn-primary" v-on:click="uploadBackImage(index)">背景图</button>
                                <img :src="buildFullUrl(item.backImage)" alt="">
                            </div>
                            <div class="left back-image image">
                                <button class="layui-btn layui-btn-primary" v-on:click="uploadTitleIcon(index)">标题icon</button>
                                <img :src="buildFullUrl(item.titleIcon)" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">服务器列表(展示)</label>
                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="serverShowAdd()"><i class="fa fa-plus"></i>添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="serverShowSave()"><i class="fa fa-floppy-o"></i>保存</button>
                <div class="layui-input-block">
                    <ul id="server-show">
                        <li class="layui-clear" v-for="(item,index) in showServerList">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input " v-model="item.name" />
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input " v-model="item.status" />
                            </div>
                            <div class="layui-input-inline">
                                <i class="fa fa-trash icon cursor del" v-on:click="showServerList.splice(index,1)"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .upload-images .img-box{
        width:100px;height:100px;
    }
    .upload-images .img-box .img{
        width:100px;height:100px;
    }
    .lunbo1-list .item {
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        width: 310px;height: 180px;
        position: relative;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    .lunbo1-list .item img{
        margin-top:10px;
        width: 150px;
        height: 86px;
    }
    .lunbo1-list .item .layui-input{
        margin-top:10px;
    }
    .lunbo1-list .item .icon{
        position: absolute;top:5px;right:5px;
        z-index:1;color:red;font-size:20px;
    }

    .lunbo2-list .item {
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        width: 310px;height: 180px;
        position: relative;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    .lunbo2-list .item img{
        margin-top:10px;
        width: 150px;
        height: 86px;
    }
    .lunbo2-list .item .layui-input{
        margin-top:10px;
    }
    .lunbo2-list .item .icon{
        position: absolute;top:5px;right:5px;
        z-index:1;color:red;font-size:20px;
    }
    .four-btns .item{
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        width: 265px;
        position: relative;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    .four-btns .item .img-box{
        width: 100px;margin-top:10px;
    }
    .four-btns .item .img-box{
        max-width: 100px;min-height: 50px;
    }
    .block-bottom{
        margin-top:10px;
    }
    .block-bottom .item{
        width:410px;height: 270px;
        padding: 20px;
        border: 1px solid #e0e0e0;
        position: relative;
        overflow: hidden;
    }
    .block-bottom .item .image{
        width:33.33%;
    }
    .block-bottom .item .image img{
        max-width: 100%;display: block;margin: 5px 0 0 5px;
    }
    .block-bottom .item .del{
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
        color: red;
        font-size: 20px;
    }
    #server-show li:nth-child(1){margin-top: 0;}
    #server-show li{
        margin-top:5px;
    }
    #server-show li .fa-trash{
        color:red;
    }
</style>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate','jquery','upload'], function () {
        var form = layui.form
            ,$ = layui.jquery
            , layer = layui.layer
        ,upload = layui.upload;

        new Vue({
            el:'#app',
            data:{
                keywords:null,
                description:null,
                indTop:null,
                indBottom:null,
                imageKefu:null,
                imageGf:null,
                settings:[],
                lunbo1:[],
                lunbo1Show:false,
                lunbo2:[],
                lunbo2Show:false,
                indexFourBtns:[
                    {
                        text:'按钮1',
                        href:'#',
                        background:'',
                    },
                    {
                        text:'按钮2',
                        href:'#',
                        background:'',
                    },
                    {
                        text:'按钮3',
                        href:'#',
                        background:'',
                    },
                    {
                        text:'按钮4',
                        href:'#',
                        background:'',
                    }
                ],
                blockBottoms:[],
                showServerList:[],
            },
            methods:{
                upload(params,callback){ //重新封装的上传方法
                    var id = generateId()
                    var elem  = "#"+id;
                    $('body').append('<button style="display: none;" id="'+id+'">按钮</button>');
                    upload.render({
                        elem: elem,
                        url:"/admin/upload/upload",
                        done:function(res){
                            callback(res,params);
                        }
                    });
                    $("#"+id).click();
                    $(elem).remove();
                },
                getValByName:function(key){
                    for(var k in this.settings){
                        var row = this.settings[k];
                        if(row.name === key){
                            return row.val
                        }
                    }
                    return null;
                },
                buildFullUrl:function(relativePath){
                    if (!relativePath) return null;
                    return '/' + relativePath;
                },
                setNameVal:function(e,name){
                    var val = e.target.value;
                    settingSetVal(name,val,function(){
                        layer.msg('设置成功',{icon:6,time:500})
                    })
                },
                lunbo1Add:function(){
                    var Id = generateId();
                    this.lunbo1.unshift({
                        id:Id,
                        href:"",
                        src:""
                    })
                },
                lunbo1Upload:function(index){
                    var _this = this;
                    this.upload({index:index},function(res){
                        _this.lunbo1[index].src = res.data.path;
                    })
                },
                lunbo2Add:function(){
                    var Id = generateId();
                    this.lunbo2.unshift({
                        id:Id,
                        href:"",
                        src:""
                    })
                },
                lunbo2Upload:function(index){
                    var _this = this;
                    this.upload({index:index},function(res){
                        _this.lunbo2[index].src = res.data.path;
                    })
                },
                lunbo1Save:function () {
                    var arr = this.lunbo1;
                    for(let k in arr){
                        delete arr[k].id
                    }
                    settingSetVal('lunbo1',JSON.stringify(arr),function(res){
                        if (res.code === 0){
                            layer.msg('保存成功',{icon:1})
                        }
                    });
                },
                lunbo2Save:function () {
                    var arr = this.lunbo2;
                    for(let k in arr){
                        delete arr[k].id
                    }
                    settingSetVal('lunbo2',JSON.stringify(arr),function(res){
                        if (res.code === 0){
                            layer.msg('保存成功',{icon:1})
                        }
                    });
                },
                fourBtnsSave:function(){
                    settingSetVal('indexFourBtns',JSON.stringify(this.indexFourBtns),function(res){
                        if (res.code === 0){
                            layer.msg('设置成功',{icon:6,time:500})
                        }
                    })
                },
                blockBottomAdd:function(){
                    this.blockBottoms.push({
                        title:"",
                        titleIcon:"",
                        desc:"",
                        frontImage:null,
                        backImage:null,
                        video:null
                    });
                },
                uploadFrontImage:function (index) {
                    var _this = this;
                    _this.upload({index:index},function(res){

                        _this.blockBottoms[index].frontImage = res.data.path;
                    })
                },
                uploadBackImage:function (index) {
                    var _this = this;
                    _this.upload({index:index},function(res){
                        _this.blockBottoms[index].backImage = res.data.path;
                    })
                },
                uploadTitleIcon:function(index){
                    var _this = this;
                    _this.upload({index:index},function(res){
                        _this.blockBottoms[index].titleIcon = res.data.path;
                    })
                },
                blockBottomSave:function(){
                    settingSetVal('blockBottoms',JSON.stringify(this.blockBottoms),function(res){
                        if (res.code ===0) {
                            layer.msg('保存成功',{icon:1})
                        }
                    });
                },
                serverShowAdd:function(){
                    this.showServerList.push({name:"",status:""})
                },
                serverShowSave:function(){
                   // var showServerList = JSON.parse(JSON.stringify(this.showServerList))
                    settingSetVal('showServerList',JSON.stringify(this.showServerList),function(res){
                        if (res.code ===0) {
                            layer.msg('保存成功',{icon:1})
                        }
                    });
                }
            },
            updated:function(){
                form.render();
            },
            mounted:function(){
                var _this = this;
                upload.render({
                    elem: '#upload-kefu',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        if (res.code === 0){
                            var relativePath = res.data.path;
                            _this.imageKefu = _this.buildFullUrl(relativePath);
                            settingSetVal('imageKefu',relativePath,function(){
                                layer.msg('设置成功',{icon:6,time:500})
                            })
                        }
                    }
                });
                upload.render({
                    elem: '#upload-gf',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        var relativePath = res.data.path;
                        _this.imageGf = _this.buildFullUrl(relativePath);
                        settingSetVal('imageGf',relativePath,function(){
                            layer.msg('设置成功',{icon:6,time:500})
                        })
                    }
                });

                function fourBtnsUpdateImg(index, relativePath){
                    _this.indexFourBtns[index].background = relativePath;
                }

                upload.render({
                    elem: '#fourBtn_0',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        var relativePath = res.data.path;
                        fourBtnsUpdateImg(0,relativePath);
                    }
                });
                upload.render({
                    elem: '#fourBtn_1',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        var relativePath = res.data.path;
                        fourBtnsUpdateImg(1,relativePath);
                    }
                });
                upload.render({
                    elem: '#fourBtn_2',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        var relativePath = res.data.path;
                        fourBtnsUpdateImg(2,relativePath);
                    }
                });
                upload.render({
                    elem: '#fourBtn_3',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        var relativePath = res.data.path;
                        fourBtnsUpdateImg(3,relativePath);
                    }
                });

                $.get('/admin/webManage/settings',{},function(res){
                    var settings = res.data;
                    _this.settings = settings;
                    _this.keywords =_this.getValByName('keywords');
                    _this.description =_this.getValByName('description');
                    _this.indTop = _this.getValByName('indTop');
                    _this.indBottom = _this.getValByName('indBottom');
                    var lunbo1 = JSON.parse(_this.getValByName('lunbo1'));
                    var lunbo2 = JSON.parse(_this.getValByName('lunbo2'));
                    _this.lunbo1 =  lunbo1;
                    _this.lunbo2 =  lunbo2;
                    _this.imageKefu = _this.buildFullUrl( _this.getValByName('imageKefu') );
                    _this.imageGf = _this.buildFullUrl( _this.getValByName('imageGf'));
                    _this.indexFourBtns = JSON.parse(_this.getValByName('indexFourBtns'));
                    _this.blockBottoms = JSON.parse(_this.getValByName('blockBottoms'));
                    _this.showServerList = JSON.parse(_this.getValByName('showServerList'))
                })
            }
        })
    });
</script>
</body>
</html>